<template name="skeleton">
  <view class="sk-container">
	<view class="sk-title"></view>
	<view class="sk-meta">
		<view class="sk-label"></view>
		<view class="sk-time"></view>
		<view class="sk-views"></view>
	</view>
	<view class="sk-content">
		<view class="sk-line" v-for="n in 6" :key="n"></view>
	</view>
  </view>
</template>

<script>
</script>

<style scoped>
.sk-container {
	width: 100%;
	padding: 30upx;
	background: #fff;
}

.sk-title {
	width: 70%;
	height: 40upx;
	background: #EEEEEE;
	border-radius: 8upx;
	margin-bottom: 20upx;
}

.sk-meta {
	display: flex;
	align-items: center;
	margin-bottom: 30upx;
}

.sk-label {
	width: 60upx;
	height: 24upx;
	background: #EEEEEE;
	border-radius: 4upx;
}

.sk-time {
	width: 120upx;
	height: 24upx;
	background: #EEEEEE;
	border-radius: 4upx;
	margin-left: 20upx;
}

.sk-views {
	width: 80upx;
	height: 24upx;
	background: #EEEEEE;
	border-radius: 4upx;
	margin-left: 20upx;
}

.sk-content {
	width: 100%;
}

.sk-line {
	width: 100%;
	height: 20upx;
	background: #EEEEEE;
	border-radius: 4upx;
	margin-bottom: 15upx;
}

.sk-line:nth-child(2) {
	width: 85%;
}

.sk-line:nth-child(3) {
	width: 90%;
}

.sk-line:nth-child(4) {
	width: 75%;
}

.sk-line:nth-child(5) {
	width: 95%;
}

.sk-line:nth-child(6) {
	width: 80%;
}
</style>